<template>
    <view class="container" v-if="data" :style="themeColor">
        <coupon-list-item :item="data"></coupon-list-item>
        <view class="detail">
            <image mode="aspectFill" class="code-img" :src="qrcode"></image>
            <text class="number">劵号：{{ data.CouponCode }}</text>
            <view class="info">
                <text>使用限制</text>
                <text v-if="data.V_GetStartTime && data.V_GetEndTime"
                    >有效时间：{{ data.V_GetStartTime.split(" ")[0] }} 至 {{ data.V_GetEndTime.split(" ")[0] }}</text
                >
                <text v-if="data.V_Remark">使用说明：{{ data.V_Remark }}</text>
            </view>
        </view>
    </view>
</template>

<script>
// import {GetQrCode} from "@/service/api/qrcode.js"
import couponListItem from "@/pages_me/components/coupon/coupon-list-item.vue"
export default {
    components: {
        couponListItem,
    },
    data() {
        return {
            data: null,
            qrcode: "",
        }
    },
    onLoad(e) {
        this.data = JSON.parse(decodeURIComponent(e.data))
    },
    mounted() {
        this.getQrcode()
    },
    methods: {
        getQrcode() {
            // this.qrcode = GetQrCode(this.data.CouponCode)
        },
    },
}
</script>

<style lang="scss">
.container {
}
.detail {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    background: $color-white;
    border-radius: 16rpx;
    width: 686rpx;
    margin: 0 $app-page-padding;
    .code-img {
        width: 278rpx;
        height: 278rpx;
        margin-bottom: 60rpx;
        margin-top: 60rpx;
    }
    .number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 464rpx;
        height: 80rpx;
        border-radius: 12rpx;
        border: solid 1rpx $color-gray-C;
        padding: 0 $app-page-padding;
        margin-bottom: 60rpx;
    }
    .info {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: calc(100% - 60rpx);
        border-top: 1rpx dashed #f1f1f1;
        padding: 34rpx 30rpx;
        position: relative;
        text-align: left;
        &:before {
            left: -16rpx;
        }
        &:before,
        &:after {
            content: "";
            position: absolute;
            width: 32rpx;
            height: 32rpx;
            border-radius: 100%;
            background: #f8f8f8;
            top: -16rpx;
            right: -16rpx;
        }
    }
}
.coupon-item {
    width: 686rpx;
    height: 180rpx;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: flex;
    flex-direction: row;
    .coupon-item-type {
        width: 160rpx;
        margin-right: 20rpx;
        padding: $app-page-padding;
    }
    .coupon-item-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: $app-page-padding;
        justify-content: center;
        .coupon-name {
            font-size: $font-size-34;
            font-weight: 700;
            color: $color-black;
            margin-bottom: 12rpx;
        }
        .coupon-desc {
            color: $app-color-text-tip;
            font-size: $font-size-24;
            margin-bottom: 2rpx;
        }
    }
}
</style>
